<template>
  <div>
    <div class="top"></div>
    <a-row>
      <a-col :xs="{ span : 24 }" :sm="{ span:6 }" class="formGroupTitle">确认充值信息</a-col>
    </a-row>
    <div class="cardmessage">
      <div style="padding-top: 20px">
        <a-form-item label="银行卡信息" :label-col="{ span: 6 }" :wrapper-col="{ span: 12,offset:1 }">
          <div class="cardmsg">
            {{seat.bankAccountName}}
            <br />
            {{seat.bankName}}（{{seat.bankCardNo | cardNofilter}}）
          </div>
        </a-form-item>

        <a-form-item label="充值金额" :label-col="{ span: 6 }" :wrapper-col="{ span: 12,offset:1 }">
          <div class="cardmsg">
            <span
              style="color: #279e71;font-size:18px;font-weight: bolder;"
            >{{seat.amount | amountfilter}}</span>
            &ensp;元
          </div>
        </a-form-item>

        <a-form-item label="支付密码" :label-col="{ span: 6 }" :wrapper-col="{ span: 12,offset:1 }">
          <div id="paypwd">
            <vue-pay-pwd :isCursor="isCursor" :pwdWidth="250" :pwdHeight="38" :getPassword="payPw"></vue-pay-pwd>&ensp;&ensp;
            <div>
              <router-link
                style="font-size:14px;color: #156ec1;"
                to="/per/safeset/modifypayindex"
              >忘记密码？</router-link>
            </div>
          </div>
        </a-form-item>
      </div>
    </div>
    <p></p>
    <a-form :form="cashform" @submit="handleSubmit">
      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:12,offset:7 }">
          <div class="next-ok">
            <a-button type="primary" :loading="loading" html-type="submit">确认充值</a-button>
            <div style="margin-left: 15px;">
              <router-link style="color:#156ec1;" to="/perRecharge">返回修改</router-link>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div v-if="codedisabled==1" class="codebox">
      <div class="center">我们已向您填写的手机号{{seat.mobileNo | mobileNofilters}}发送了一条验证码，请查收后填写</div>
      <div style=" margin-top: 50px;">
        <a-form-item
          style="font-size:16px;flex:1;"
          label="验证码"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 15,offset:1 }"
        >
          <a-input style="width:300px" placeholder="请输入短信验证码" v-model="VerCode" />
        </a-form-item>
      </div>
      <div style="margin-top: 50px;width: 140px;margin: 0 auto;">
        <a-button type="primary" @click="sendcode()">下一步</a-button>
      </div>
    </div>
  </div>
</template>
      
      <script>
import { JSEncrypt } from "jsencrypt";
import api from "@/common/api";
import Vue from "vue";
import vuePayPwd from "vue-pay-pwd";

Vue.use(vuePayPwd);
export default {
  data() {
    return {
      bankCardNo: "",
      seat: "",
      amountSum: "",
      phoneVerify: false,
      loading: false,
      phonenum: "",
      cardusername: "",
      cardname: "",
      cardid: "",
      cashform: this.$form.createForm(this),
      issend: true,
      userpw: "",
      isCursor: true, //是否开启光标
      count: 30,
      codeMsg: "获取验证码",
      timer: "",
      buttonStyle: {
        background: "#279e71"
      },
      codedisabled: 0,
      VerCode: "",
      chargeid: "",
      orderNo: ""
    };
  },
  filters: {
    cardNofilter(value) {
      if (value) {
        var reg = /.*(.{4})$/;
        return value.replace(reg, "**** **** **** ***$1");
      }
    },
    mobileNofilters(value) {
      if (value) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return value.replace(reg, "$1****$2");
      }
    },
    amountfilter(value) {
      return parseFloat(value / 100).toFixed(2);
    }
  },
  created() {
    this.getParams();
  },
  mounted() {
    // this.selectData();
  },
  methods: {
    payPw(pw) {
      console.log("获取支付密码", pw);
      this.userpw = pw;
    },
    validateCode(rule, value, callback) {
      // let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
      if (value && !/^[0-9]*[1-9][0-9]*$/.test(value)) {
        /* eslint-disable-next-line */
        this.amountt = false;
        callback("请输入数字");
        return;
      } else {
        //console.log(value);
        callback();
      }
    },
    handleSubmit(e) {
      e.preventDefault();
      console.log("确认充值");

      if (!this.userpw) {
        this.$message.warning("请输入密码！");
      } else {
        if (this.userpw.length < 6) {
          this.$message.warning("请输入正确密码！");
        }
      }
      this.cashform.validateFields((err, values) => {
        if (!err) {
          console.log(this.seat.bankCardNo);
          var usermobileNo = this.seat.mobileNo;
          var params = { scope: "recharge", key: usermobileNo };
          this.loading = true
          api.fetchPubKey(
            params,
            res => {
              console.log(res);
              let pass = this.userpw;
              console.log(this.userpw);
              console.log("id", this.seat.id);
              console.log("key", usermobileNo);
              pass = api.getEncryptData(res.data.pubKey, pass);
              console.log(pass);
              this.$axios
                .post("/agent/recharge/updateStatus", {
                  id: this.seat.id,
                  payPassword: pass,
                  key: usermobileNo
                })
                .then(res => {
                  this.loading = false
                  // console.log(res);

                  this.$message.info(res.data.message);
                  if (res.data.data.flag == true) {
                    this.opencode();
                    this.chargeid = res.data.data.id;
                    this.orderNo = res.data.data.orderNo;
                  } else {
                    this.$router.push({
                      name: "确认充值成功",
                      params: {
                        recharge: this.seat.amount,
                        typename: "perConfirmRecharge",
                        isbind: "true"
                      }
                    });
                  }
                  // if (res.data.message == "充值成功") {
                  //   this.$router.push({
                  //     name: "确认充值成功",
                  //     // path: "/cashmore-next",
                  //     params: {
                  //       recharge: this.seat.amount,
                  //       typename: "perConfirmRecharge",
                  //       isbind: "true"
                  //     }
                  //   });
                  // }
                });
            },
            error => {
              alert("错误");
            }
          );
        }
      });
    },
    getParams() {
      // 取到路由带过来的参数
      this.seat = this.$route.params.seat;
      console.log(this.seat);
    },
    opencode() {
      this.codedisabled = 1;

      // this.$axios
      //   .post("/agent/recharge/open/fastPayment", {
      //     accountNo: this.bankCardDTOdata.accountNo
      //   })
      //   .then(res => {
      //     console.log(res);
      //     if (res.data.code == "OK") {
      //       this.codedisabled = 1;
      //     }
      //   });
    },
    sendcode() {
      if (this.VerCode == "") {
        this.$message.error("请输入验证码");
      } else {
        console.log(this.VerCode);
        console.log(this.chargeid);
        console.log(this.orderNo);
        this.$axios
          .post("/agent/recharge/updateStatus/verification", {
            id: this.chargeid,
            orderNo: this.orderNo,
            code: this.VerCode
          })
          .then(res => {
            console.log(res);
            if (res.data.code == "OK") {
              this.$router.push({
                name: "确认充值成功",
                params: {
                  recharge: this.seat.amount,
                  typename: "perConfirmRecharge",
                  isbind: "true"
                }
              });
            } else if (res.data.code == "FAIL") {
              this.$router.push({
                name: "确认充值成功",
                params: {
                  Failurereason: res.data.message,
                  typename: "perConfirmRecharge",
                  isbind: false
                }
              });
            }
          });
      }
    }
  }
};
</script>
      
      <style scoped>
.top {
  height: 50px;
}

.codebox {
  width: 65vw;
  height: 500px;
  margin-top: -380px;

  background-color: white;
  position: absolute;
  z-index: 1000;
}
.center {
  width: 600px;
  font-size: 18px;
  margin: 0 auto;
  font-weight: bolder;
  margin-top: 100px;
}
.cardmessage {
  width: 100%;
  font-size: 16px;
}

.cardmsg {
  text-align: left;
}

#paypwd {
  display: flex;
  flex-direction: row;
}

.next-ok {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.formGroupTitle {
  font-size: 22px;
  font-weight: bold;
  text-align: right;
}
</style>